import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import {
	Chart,
	Interval,
	Tooltip,
	Axis,
	Coordinate,
	Interaction,
	getTheme
} from 'bizcharts';
import * as echarts from 'echarts';

class RegionalDistributionChart extends Component {
	constructor(props) {
		super(props),
			this.state = {
				option: {
					title: {
						text: '地区分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [
						{
							name: '地区',
							type: 'pie',
							radius: '50%',
							data: this.props.regionalDistributionChartData,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				}
			}
	}

	componentDidMount() {
		var chartDom = document.getElementById('regionalDistributionChart');
		var myChart = echarts.init(chartDom);
		myChart.setOption(this.state.option);
	}

	render() {
		return (
			<div id="regionalDistributionChart" style={{ height: 500, width: 700 }}></div>
			// <Chart height={700} data={this.props.regionalDistributionChartData} autoFit>
			// 	<Coordinate type="theta" radius={0.75} />
			// 	<Tooltip showTitle={false} />
			// 	<Axis visible={false} />
			// 	<Interval
			// 		position="value"
			// 		adjust="stack"
			// 		color="city"
			// 		style={{
			// 			lineWidth: 1,
			// 			stroke: '#fff',
			// 		}}
			// 		label={['count', {
			// 			content: (data) => {
			// 				return `${data.city}: ${data.value}`;
			// 			},
			// 		}]}
			// 		state={{
			// 			selected: {
			// 				style: (t) => {
			// 					const res = getTheme().geometries.interval.rect.selected.style(t);
			// 					return { ...res, fill: 'red' }
			// 				}
			// 			}
			// 		}}
			// 	/>
			// 	<Interaction type='element-single-selected' />
			// </Chart>
		)
	}
}

const mapStateToProps = state => {
	let regionalDistributionChartData = state.patentData.regionalDistributionChartData
	return {
		regionalDistributionChartData
	}
}

export default connect(mapStateToProps)(RegionalDistributionChart)